<template>
  <div class="from">
    <!-- 表单头部 -->
    <div class="top">
      <el-input
        v-model="input"
        placeholder="商品名称"
        @input="inputChangeFn"
      ></el-input>
      <el-button type="primary" @click="queryFn">查询</el-button>
      <el-button type="primary" @click="addFn">添加</el-button>
      <el-button type="primary" @click="resetFn">重置</el-button>
    </div>
    <!-- 表格部分 组件 -->
    <Table :tableData='tableData'  />
    <!-- 页面底部 -->
    <GoodsFooter :currentPage4='currentPage4' :pageSizes='pageSizes' :total='total'    @fn="changPageFn"  @fn2="changSizeFn"/>
  </div>
</template>

<script>
const { getGoodLists } = require("../../request/httpApi");
import Table from './GoodsTable.vue'
import GoodsFooter from "./GoodsFooter.vue"
export default {
  data() {
    return {
      //查询框的数据
      input: "",
      //初始数据
      tableData: [],
      //当前页
      currentPage4: 1,
      //每页显示个数选择器的选项设置
      pageSizes: 10,
      //总的条目数
      total: 0,
      myid: "",
    };
  },
  components:{
    Table,GoodsFooter
  },
  methods: {
    //分页数据 子传父
    changPageFn(val){
      //获得当前页 再次发起请求
      this.currentPage4 = val
      this.getGoodListsFn()
    },
    changSizeFn(val){
       //获得页码数 再次发起请求
      this.pageSizes = val
      this.getGoodListsFn()
    },


    //点击添加  跳转路由
    addFn() {
      this.$router.push("/addgood");
    },
  
    //点击重置按钮
    resetFn() {
      this.input = "";
    },
    //点击查询的时候 匹配搜索框的值
    queryFn() {
      this.getGoodListsFn();
    },
    //输入框输入值改变的时候
    inputChangeFn(e) {
      this.input = e;
    },

    ///请求数据的封装  
    getGoodListsFn() {
      getGoodLists({
        page: this.currentPage4,
        size: this.pageSizes,
        name: this.input,
      }).then((res) => {
        if (res.errno === 0) {
          // console.log(res.data);
          this.tableData = res.data.data;
          //总页数
          this.total = res.data.count;
          this.myid = res.data.data.id;
        }
      });
    },
  },
  created() {
    //初次加载的渲染
    this.getGoodListsFn();
  },
};
</script>

<style lang="less">
.from {
  background-color: #fff;
  padding: 10px;
}
.top {
  display: flex;
  /* align-items: center; */
}

.el-input {
  width: 200px;
  margin-right: 10px;
  height: 32px;
  line-height: 32px;
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  float: right;
  margin: 10px 0;
}
.el-button {
  font-size: 12px;
}
</style>